<script>
import ResumeArticleCard from "../../components/resume/ResumeArticleCard.vue";
import ResumeArticleList from "../../components/resume/ResumeArticleList.vue";
import ResumeAlbum from "../../components/resume/ResumeAlbum.vue";
import PersonCard from "../../components/resume/PersonCard.vue";

export default {
    name: "Index",
    components: {PersonCard, ResumeAlbum, ResumeArticleList, ResumeArticleCard},
    data() {
        return {
            logData: [
                {
                    title: '深深的爱，淡淡的香',
                    summary: '一朵花，皎洁，素雅，渐渐地演变成了一幅画，印在了记忆的长河里。那花，叶细长，翠翠的，花开时，伸出一只长长的颈，花儿在',
                    updateTime: '2022-01-05',
                    banner: '/resume/index/log1.png',
                },
                {
                    title: '遇见你，不知是美好还是错误',
                    summary: '我一直用心向着阳可是我始终摆脱不了那后阴影，我从来没有承认过我的感情路有多么坎坷，因为离人要走所以所有的一切都那么惨白',
                    updateTime: '2022-01-06',
                    banner: '/resume/index/log2.png',
                }
            ],
            logList:[
                {
                    title: '请好好珍惜“路痴”朋友',
                    summary: '小时候啊，总盼望着长大，认为长大好啊，长大了，可以买好多好多的衣服 吃的 玩的，而且还没有人管自己，多好啊!长大后啊，总是盼望着童年，原来长大难啊，小时候，可以无忧无虑的撒娇 玩耍 胡闹，而且也没有人骂自己 ，多好',
                    updateTime: '2022-01-05',
                },
                {
                    title: '是夜，静守那一季相思',
                    summary: '今年的天气比去年同期要冷的多，入冬的雪肆意狂掠了深秋仅存的些许温暖，落叶飘零，斑驳在雪野里，弥漫着季节的落寞，街道两旁的树上，还凌乱的摇曳着片片不甘心谢幕的黄叶，被风吹过，不甘心地再次炫舞落寞。在这样的季节',
                    updateTime: '2022-01-05',
                },
                {
                    title: '你的名字就是我的心痛',
                    summary: '独坐角落看下雨的窗外，眼前的风景都蒙上了一层帘幕，细雨漫天，叫人看得不真切,就好似她的心。一滴一串雨点以断了线的珠子，往远处看去，好象一块灰幕遮住了视线，灰蒙蒙一片。　　雨点在水面上画出了一个一个的音符。如一',
                    updateTime: '2022-01-05',
                },
            ]
        }
    }
}
</script>

<template>
    <div class="flex column align-center" style="min-width: 1200px;">
        <div v-lazy-container="{ selector: 'img' }" style="width: 100%">
            <img data-src="/resume/11.jpg" alt="" style="width: 100%">
        </div>
        <div class="flex row space-around" style="width: 1200px;margin-top: 71px">
            <div class="flex row space-between" style="width: 140px;height: 150px;margin-top: 50px">
                <div class="flex column flex-end" style="height: fit-content">
                    <span style="color: rgb(68, 68, 68);font-size: 26px;">JOURNAL</span>
                    <span style="color: #444444;font-size: 20px;text-align: right;">日志</span>
                    <a style="font-size: 14px;color: #666;text-align: right;margin-top: 40px">MORE+</a>
                </div>
                <span style="font-weight: bolder;font-size: 19px;color: rgb(255, 192, 1);margin-top: 3px">|</span>
            </div>
            <div class="flex column" style="width: 945px">
                <div class="flex row space-between" style="width: 945px">
                    <ResumeArticleCard v-for="(item,i) in logData" :key="i" :data="item"/>
                </div>
                <ResumeArticleList :list="logList"/>
            </div>
        </div>
        <div class="flex column center align-center" style="width: 1200px;margin-top: 71px">
            <div class="flex column center align-center">
                <span style="color: rgb(68, 68, 68);font-size: 26px;">ALBUM</span>
                <span style="color: rgb(255, 192, 1);font-weight: bolder;font-size: 19px">—</span>
                <span style="color: #444444;font-size: 20px;text-align: right;">相册</span>
            </div>
            <ResumeAlbum/>
            <span class="flex center align-center" style="cursor: pointer;font-size: 16px;color: white;width: 162px;height: 50px;border-radius: 26px;background: #ffc001;margin-top: 50px">MORE</span>
        </div>
        <div class="flex row space-around" style="width: 1200px;margin-top: 71px;margin-bottom: 100px">
            <div class="flex row space-between" style="width: 220px;height: 150px;margin-top: 50px">
                <div class="flex column flex-end" style="height: fit-content">
                    <span style="color: rgb(68, 68, 68);font-size: 26px;">PERSONAL FILE</span>
                    <span style="color: #444444;font-size: 20px;text-align: right;">个人档</span>
                    <a style="font-size: 14px;color: #666;text-align: right;margin-top: 40px">MORE+</a>
                </div>
                <span style="font-weight: bolder;font-size: 19px;color: rgb(255, 192, 1);margin-top: 3px">|</span>
            </div>
            <div class="flex column" style="width: 940px">
                <PersonCard/>
            </div>
        </div>
    </div>
</template>

<style scoped>

</style>
